<template>
	<view>
		<view class="wrap">
			<div class="header">
				<div class="search">
					<u-search placeholder="请输入搜索订单" bgColor="#F8F9FA" @blur="skeySearch" @clear="skeyClear" clearable :showAction="false" v-model="form.skey"></u-search>
					<div class="type" @click="changeOrderype">
						<span>{{ ordertype }}</span>
						<u-icon name="arrow-down" color="#333" size="11"></u-icon>
					</div>
				</div>
				<div class="tabs">
					<u-tabs
						:list="list"
						lineColor="#21B579"
						itemStyle="padding-left: 36rpx; padding-right: 36rpx; height: 44px;"
						:activeStyle="{
							color: '#333',
							fontWeight: 'bold',
							transform: 'scale(1.05)'
						}"
						:inactiveStyle="{
							color: '#666',
							transform: 'scale(1)'
						}"
						@click="change"
						:current="swiperCurrent"
					></u-tabs>
				</div>
			</div>

			<swiper class="swiper-box" :current="swiperCurrent" @change="swiperChange">
				<swiper-item class="swiper-item" v-for="(el, index) in list" :key="index">
					<scroll-view scroll-y style="height: calc(100%); width: 100%" @scrolltolower="scrollBottom" :enable-back-to-top="true">
						<view class="page-box">
							<view class="order" v-if="orderList.length">
								<view class="item" v-for="(item, i) in orderList" :key="i">
									<Item :item="item" :userId="userInfo.id" v-if="ordertype==='服务订单'" />
									<ServiceItem :item="item" :userId="userInfo.id" v-else />
								</view>
							</view>
							<view style="margin-top: 120rpx" v-else>
								<u-empty text="抱歉，没有找到订单哦" width="200rpx" textColor="#999" icon="/static/nodata.png"></u-empty>
							</view>
							<u-loadmore status="nomore" v-if="isTouchBottom && form.currPage != 1" />
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
			<!-- 订单类型选择 -->
			<u-picker :show="showType" :columns="columns" keyName="label" @confirm="confirmOrderype"></u-picker>
		</view>
	</view>
</template>

<script>
import Item from './modules/item.vue';
import ServiceItem from './modules/serviceItem.vue';
// import {
// 	baseDownloadUrl
// } from '@/utils/url';
// import goods from '@/static/images/home/goods.jpg';
import{serviceTablist,orderTablist} from '../../utils/public.js'
export default {
	components: {
		Item,
		ServiceItem
	},
	data() {
		return {
			form: {
				currPage: 1,
				pageSize: 15,
				userId: '',
				skey: '',
				orderState: '-1'
			},
			word: '',
			userInfo: '',
			ordertype: '服务订单',
			showType: false,
			// userId: this.userId,
			columns: [
				[
					{
						label: '服务订单',
						// 其他属性值
						id: 1
						// ...
					},
					{
						label: '保修订单',
						id: 2
					}
				]
			],
			// orderList: [[], [], [], [], [], []],
			orderList: [],
			isTouchBottom: false,
			goods: '',
			popupShow: false,
			returnList: [],
			list: orderTablist,
			
			current: 0,
			swiperCurrent: 0,
			tabsHeight: 0,
			dx: 0,
			loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore', 'loadmore']
		};
	},

	onShow() {
		// this.getData(0);
		console.log(getApp().globalData.active);
		this.swiperCurrent = Number(getApp().globalData.active) + 1;
		this.form.orderState = getApp().globalData.active;
		// this.name = getApp().globalData.name;//赋值取得参数
	},
	onLoad(options) {
		console.log('=========');
		console.log(options);
		// this.form.orderState =3
		//
		// console.log(this.userId)
		// this.userId='15'
		this.getUserInfo();
	},
	onReachBottom() {
		// console.log('11', this.swiperCurrent);
		// this.form.currPage = this.form.currPage + 1;
		// this.getData(this.swiperCurrent);
	},
	methods: {
		// 获取数据
		getData() {
			// console.log(index);
			uni.showLoading();
			const url = this.ordertype === '服务订单' ? '/fit/getUserOrderList' : '/fit/getUserServiceOrderList';

			uni.showLoading({
				title: '加载中'
			});
			this.isTouchBottom = false
			this.$api.post(url, this.form).then((res) => {
				uni.hideLoading();

				this.orderList = [...this.orderList, ...res.data];
				if(!res.data.length && this.form.currPage != 1){
					this.isTouchBottom = true
				}else{
					this.isTouchBottom = false;
				}

				// console.log(this.orderList);
			});
		},

		change(index) {
			// console.log(index);
			this.form.orderState = index.id;
			this.swiperCurrent = index.index;
			this.form.currPage = 1;
			this.isTouchBottom = false;
			// console.log(this.orderList[index])
			let i = index.index;
			// if (!this.orderList[index].length) this.getData(i);
			this.orderList = [];
			// this.getData();
		},
		swiperChange(e) {
			// console.log(e.detail.current);
			let obj = this.list[e.detail.current];
			this.form.orderState = obj.id;
			this.swiperCurrent = e.detail.current;
			this.form.currPage = 1;
			this.isTouchBottom = false;
			console.log(this.list[e.detail.current].id);

			this.orderList = [];
			this.getData();
		},
		scrollBottom(e) {
			console.log(e);
			this.form.currPage = this.form.currPage + 1;
			if(!this.isTouchBottom){
				this.getData();
			}
			
		},
		
		// 修改订单类型
		changeOrderype() {
			this.showType = true;
		},
		skeySearch(e) {
			// setTimeout(()=>{
			// 	this.form.skey =e
			// 	this.form.currPage =1
			// 	this.isTouchBottom = false
			// 	this.getData();
			// },1000)
			this.form.skey = e;
			this.form.currPage = 1;
			this.isTouchBottom = false;
			this.orderList=[]
			this.getData();
			// console.log(e)
		},
		skeyClear() {
			console.log('=======jfdsfdjklsfdjsiokl')
			this.form.skey = '';
			this.form.currPage = 1;
			this.isTouchBottom = false;
			this.getData();
		},
		// 确认订单类型
		confirmOrderype(e) {
			console.log(e.value[0]);
			this.showType = false;
			this.ordertype = e.value[0].label;
			this.form.currPage = 1;
			this.isTouchBottom = false;
			
			// if(e===1){
				
			// }
			if(e.value[0].id==1){
				this.list = orderTablist
				
			}else{
				this.list =serviceTablist
			}
			this.form.orderState=this.list[0].id
			this.form.skey=''
			this.swiperCurrent=0
			this.orderList = []
			this.getData()
		},
		// onPageScroll(e) {
		// 	this.scrollTop = e.scrollTop;
		// },
		getUserInfo() {
			let that = this;
			uni.getStorage({
				key: 'userInfo',
				success(res) {
					that.userInfo = res.data;
					that.form.userId = res.data.id;
					that.getData(0);
				},
				fail(err) {
					uni.redirectTo({
						url: '../login/index'
					});
				}
			});
		}
	}
};
</script>

<style>
/* #ifndef H5 */
page {
	/* height: 100%; */
	/* overflow: scroll; */
	/* background-color: #f00; */
}

/* #endif */
</style>

<style lang="scss" scoped>
.header {
	position: fixed;
	// top: 88rpx;
	z-index: 99;
	width: 100%;
	background: #fff;
}

.swiper-box {
	// flex: 1;
	// height: calc(100vh - var(--window-top) - 300rpx);
	// height: 100%;
	// padding-bottom: 100rpx;
	margin-top: 196rpx;
	min-height: 100%;
	// overflow: scroll;
}
/*  #ifdef  H5  */
.swiper-box {
	// flex: 1;
	// height: calc(100vh - var(--window-top) - 300rpx);
	// height: 100%;
	padding-bottom: 100rpx;
	margin-top: 196rpx;
	// overflow: scroll;
}
/*  #endif  */
.swiper-item {
	height: 100%;
}

.wrap {
	display: flex;
	flex-direction: column;
	// height: calc(100vh - var(--window-top));
	width: 100%;
	height: 100vh;
	// padding-bottom: 50rpx;
	.search {
		width: 100%;
		// height: 160rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 32rpx;
		background-color: #fff;
		.type {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: 60rpx;
			span {
				margin-right: 5rpx;
				font-size: 22rpx;
				color: #333;
			}
		}
	}
	.tabs {
		background-color: #fff;
	}
	// background-color: #fff;
	.order {
		width: 98%;
		// background-color: #ffffff;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
	}
}
// @import './member_order_list.scss';
.wrap {
	// /deep/ .u-tabs__wrapper__nav {
	// 	width: 100%;
	// 	// justify-content: space-between !important;
	// }
}
.page-box {
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}
</style>
